//专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'
const router = new VueRouter({
    routes: [
        {
            name: "guanyu",
            path: '/about',
            component: About,
            meta: { isAuth: false, title: "关于" }
        },
        {
            name: "zhuye",
            path: '/home',
            component: Home,
            meta: { isAuth: false, title: "主页" },
            children: [
                {
                    name: "xinwen",
                    path: 'news',
                    component: News,
                    meta: { isAuth: true, title: "新闻" },
                    //独享路由守卫
                    beforeEnter: (to, from, next) => {
                        console.log("前置路由守卫", to, from);
                        if (to.meta.isAuth) {   //判断当前路由是否需要进行权限控制
                            if (localStorage.getItem('school') === 'atguigu') {  //权限控制的具体规则
                                next();
                            } else {
                                alert("学校名称不对，无权限！")
                            }
                        } else {
                            next(); //放行
                        }
                    }
                },
                {
                    name: "xiaoxi",
                    path: 'message',
                    component: Message,
                    meta: { isAuth: true, title: "消息" },
                    children: [
                        {
                            name: "xiangqing",
                            path: 'detail',
                            component: Detail,
                            meta: { isAuth: true, title: "详情" },
                            //第一种写法：props值为对象，该组件中所有的key-value都会通过props传给Detail组件
                            // props: { a: 100, b: 200 },
                            //第二种写法：props为布尔值，为true，则把所有接收到的params参数通过props传给Detail组件
                            // props: true
                            //第三种写法：值为函数，该组件中所有的key-value都会通过props传给Detail组件
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
//全局前置路由守卫——初始化的时候被调用、每次切换路由之前被调用
// router.beforeEach((to, from, next) => {
//     console.log("前置路由守卫", to, from);
//     if (to.meta.isAuth) {   //判断当前路由是否需要进行权限控制
//         if (localStorage.getItem('school') === 'atguigu') {  //权限控制的具体规则
//             next();
//         } else {
//             alert("学校名称不对，无权限！")
//         }
//     } else {
//         next(); //放行
//     }
// })
//全局后置路由守卫——初始化的时候被调用、每次切换路由之后被调用
router.afterEach((to, from) => {
    console.log("后置路由守卫", to, from);
    document.title = to.meta.title || "鬼谷系统"    //修改网页的title
})
export default router